<template>
    <div class="page-head-login" v-if="false">
        <div class="page-head-login-logo"></div>
        <!--<div class="page-head-login-version">授权版</div>-->
        <div class="page-head-login-right-wrapper">
            <div class="page-head-login-element-button-wrapper at-right">
                <!--<el-button type="primary" icon="el-icon-back" @click="backToMain">主页</el-button>-->
                <el-button size="small" type="primary" plain>当前登录：{{userName}}</el-button>
                <!-- <el-button icon="el-icon-back" @click="backToMain">登出</el-button> -->
                <el-button
                    type="success"
                    icon="el-icon-back"
                    @click="backToMain"
                    size="small"
                >登出</el-button>
            </div>
            <!--<div class="page-head-login-element-button-wrapper">-->
            <!--<el-dropdown @command="handleCommand">-->
            <!--&lt;!&ndash;<el-button type="primary">&ndash;&gt;-->
            <!--<el-button>-->
            <!--{{companyName}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
            <!--</el-button>-->
            <!--<el-dropdown-menu slot="dropdown">-->
            <!--<el-dropdown-item command="personalSet">个人设置</el-dropdown-item>-->
            <!--<el-dropdown-item command="esc">退出账户</el-dropdown-item>-->
            <!--</el-dropdown-menu>-->
            <!--</el-dropdown>-->
            <!--</div>-->
            <!--<div class="page-head-login-avatar">-->
            <!--<img v-if="avatar" :src="avatar">-->
            <!--<img v-if="!avatar" src="../../common/pic/avatarDefault.png"/>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script >
// 1、可以退出登录和返回主页面
export default {
    data: function () {
        return {
        }
    },
    computed: {
        avatar () {
            return this.$store.state.avatar
        },
        companyName () {
            return this.$store.state.companyName
        },
        userName () {
            return this.$store.state.userName
        }
    },
    created () {

    },
    methods: {
        backToMain () {
            this.$router.replace({
                path: '/login'
            })
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/system/loginOut', params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用登出返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.$store.dispatch('setHasLogin', false)
                    this.$store.dispatch('agentId', '')
                    console.log('调用登出成功')
                }
                if (response.ret !== '0') {
                    console.log('调用登出失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    },
    components: {
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.page-head-login
    width: 100%
    height: 64px
    position: relative
    background: #fff

    .page-head-login-logo
        position: absolute
        top: 15px
        left: 20px
        height: 36px
        width: 283px
        background-image: url('/addService/static/pic/logo.png')
        // background-size: 280px 36px
        background-repeat: no-repeat
        cursor: pointer

    .page-head-login-version
        height: 22px
        width: 55px
        line-height: 22px
        text-align: center
        color: #fff
        background: #48ace6
        border-radius: 3px
        position: absolute
        top: 16px
        left: 350px

    .page-head-login-right-wrapper
        position: absolute
        right: 22px
        top: 0
        height: 64px

        .page-head-login-avatar
            margin-top: 15px
            margin-right: 10px
            float: right
            display: inline-block
            border-radius: 50%
            height: 34px
            width: 34px

            img
                width: 34px
                height: 34px
                border-radius: 50%

        .page-head-login-element-button-wrapper
            margin-top: 15px
            display: inline-block
            float: right
            margin-right: 22px
            &.at-right
                margin-right: 0
                margin-top: 15px

    .page-head-login-right-wrapper-in
        position: absolute
        right: 22px
        top: 0
        height: 64px

        .page-head-login-avatar
            margin-top: 15px
            margin-right: 10px
            float: right
            display: inline-block
            border-radius: 50%
            height: 34px
            width: 34px

            img
                width: 34px
                height: 34px
                border-radius: 50%

        .page-head-login-element-button-wrapper
            margin-top: 15px
            display: inline-block
            float: right
            margin-right: 22px

            &.at-right
                margin-right: 0
                margin-top: 15px
</style>
